<template>
	<div>
		<p class="filter"></p>
		<div class="addBox"  style="padding-bottom: 100px;" v-loading="formLoading">
			<h3 class="fixTitle">
				<span>编辑</span>
				<p>
					<em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<table>
				<tr>
					<td class="leftTd">章节名称：</td>
					<td class="rightTd"><el-input v-if="videoData!=''" v-model="videoData[0].VideoName" placeholder="名称" style="width: 250px;"></el-input></td>
				</tr>
				<tr>
					<td class="leftTd">序号：</td>
					<td class="rightTd"><el-input  v-if="videoData!=''" v-model="videoData[0].Sort" placeholder="序号" style="width: 250px;"></el-input></td>
				</tr>
			</table>
      <p style="text-align:center;padding: 10px 0;">
        <el-button type="primary" @click="save">确认</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </p>
		</div>
	</div>
</template>
<script>
  import {getCourseVedio, getCourseVedioById, setCourseVedio} from '@/api/courseDetail'
  export default {
    props: ['id'],
    data() {
      return {
      	formLoading: false,
        videoData: [],
        param:{
              courseDetailId:null,
              courseId:null,
              videoName:null,
              pfVideoId:null,
              videoSrc:null,
              videoUrl:null,
              sort:null,
              opType:null
          }
      }
    },
	created() {

	},
	watch: {
        id() {
            // 反显数据
            getCourseVedioById(this.id)
                .then(res => {
                    this.videoData = res.data.data
                })
                .catch(err => {
                    console.log(err)
                })
		}
	  },
    methods: {
      close() {
        this.$emit('hideEdit', false)
      },
	  save(){
          this.param.courseDetailId = this.id
		  this.param.videoName = this.videoData[0].VideoName
          this.param.sort = this.videoData[0].Sort
          this.param.opType = 2
          
          if(this.param.videoName.replace(/(^\s*)|(\s*$)/g,'')=="") {
            this.$message({ message: '章节名称不能为空' })
            return false
          }
          if(this.param.sort && isNaN(this.param.sort)) {
            this.$message({ message: '请输入正确的序号' })
            return false
          }else if(this.param.sort<0) {
            this.$message({ message: '序号需要大于0' })
            return false
          }
          
          this.formLoading = true
          setCourseVedio(this.param).then(res => {
          	  this.formLoading = false
              this.$message({
                      type: 'success',
                      message: '修改成功!'
                  })

                  this.close()
                  this.$emit('getData', this.param)
		  })
      }
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	.fixTitle{
    width: 400px;
    padding-left: 20px;
	}
	.addBox {
		width: 400px;
		height: auto;
		background: #fff;
		position: fixed;
		left: 35%;
		top: 30%;
		z-index: 110;
	}
	table{
		width: 100%;
		border: 1px solid #eee;
		border-spacing: 0;
		border-collapse: collapse;
		margin-top: 40px;
	}
	td{
		border: 1px solid #eee;
		line-height: 50px;
		padding-left: 10px;
	}
	.leftTd{
		width: 30%;
	}
	.rightTd{
		width: 70%;
	}
</style>
